{use master_page('front/v_page_master')}

{block left}
<script src='../../scripts/jquery_plugins/adgallery/jquery.ad-gallery.js?rand=407'></script>
<link href="../../scripts/jquery_plugins/adgallery/jquery.ad-gallery.css" rel="stylesheet" media="screen" type="text/css"></link>
<script> 
$(document).ready(function(){ 
	var galleries = $('.ad-gallery').adGallery({
	  loader_image: '../../scripts/jquery_plugins/adgallery/loader.gif',
	  width: 900, // Width of the image, set to false and it will read the CSS width
	  height:600, // Height of the image, set to false and it will read the CSS height
	  thumb_opacity: 0.7, // Opacity that the thumbs fades to/from, (1 removes fade effect)
	                      // Note that this effect combined with other effects might be resource intensive
	                      // and make animations lag
	  start_at_index: 0, // Which image should be displayed at first? 0 is the first image
	  description_wrapper: $('#descriptions'), // Either false or a jQuery object, if you want the image descriptions
	                                           // to be placed somewhere else than on top of the image
	  animate_first_image: false, // Should first image just be displayed, or animated in?
	  animation_speed: 400, // Which ever effect is used to switch images, how long should it take?
	  display_next_and_prev: true, // Can you navigate by clicking on the left/right on the image?
	  display_back_and_forward: true, // Are you allowed to scroll the thumb list?
	  scroll_jump: 0, // If 0, it jumps the width of the containe
	  callbacks:{
		afterImageVisible: function() {
			var context = this;
			// alert(context.images[context.current_index].title); 
			var alt = context.images[context.current_index].title;
			// alert(alt) ;
			$("#imageDescription").text(alt) ;  
		}
	  }
	  
	});

	
    
	// Set image description
	//some_img.data('ad-desc', 'This is my description!');

	// Change effect on the fly
	galleries[0].settings.effect = 'fade';

	$(".ad-controls img").css("width","100px");
	$(".ad-controls img").css("height","100px");	 
	
}); 
</script>
<center>
<div class="content">
   <div class="main" style="background-color:black">
	   <div class="banner2"><img src="images/banner2.jpg" width="1000" height="100"></div>
	
	   <div class="bar" style="background-color:white"><b><a href="<?=_U("")?>"></a>{page->title}</b>
		   <span><font>当前位置 :</font> 
		   <a href="<?=_U("")?>">首页&nbsp;&nbsp;></a>
				{page->title}
		   </span>
	    </div>
		<?php $images = $page->fetch_images(Fetch_Image_Model::All);
			$first_image = isset($images[0])?$images[0]:null ; ?> 
		<div class="ad-gallery">
			<div class="ad-image-wrapper">
			</div>
			<div class="ad-text" style="width:900px;height:40px;margin-top:0px;margin-bottom:10px;">
				<div style="color:#e9e9e9;text-align:left;margin-left:20px;font-size:14px"> 图片描述:
				<label id="imageDescription">
				<?php echo ($first_image!=null)?$first_image->title:'没有说明'?></label> 
				</div>  
			</div>
			<div class="ad-nav"><div class="ad-thumbs">
				<ul class="ad-thumb-list">
				<?php foreach($images as $image):?>
				<li>
					<a href="<?php echo $image->src?>">
					<img style="width:100px;height:100px" title="<?php echo $image->title?>"
						alt="<?php echo $image->title?>" src="<?php echo $image->src?>" >
					</a>
				</li>
				<?php endforeach;?> 
				</ul>
			</div></div>
		</div>  
	</div>
   
</div>
</center>
{end}  

{block main} 

{end}
